<script setup>
import { ref, watchEffect } from "vue";
import Dialog from "../../../../components/Dialog.vue";
import * as echarts from "echarts";

const props = defineProps(["visible", "title", "data"]);

const emits = defineEmits(["close"]);

const PieRef = ref(null);
watchEffect(() => {
  if (!PieRef.value) return;
  const chart = echarts.init(PieRef.value);

  const option = {
    tooltip: {
      trigger: "item",
    },

    legend: {
      // bottom: "5%",
      // top:'center',
      bottom: 15,
      itemWidth: 10,
      itemHeight: 10,
      // left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 14,
        rich: {
          value: {
            fontSize: 18, // 设置 value 的字体大小
            fontWeight: "bold", // 设置 value 的字体加粗
            color: "#ffffff", // 设置 value 的字体颜色
          },
        },
      },
      formatter: function (name) {
        const dataItem = option.series[0].data.find(
          (item) => item.name === name
        );
        const value = dataItem ? dataItem.value : 0;
        return `${name}   {value|${value}}`;
      },
    },
    series: [
      {
        // name: "Access From",
        color: ["#297ffe", "#fdde78", "#2ffcf0", "#b46bea", "#93c7fa"],
        type: "pie",
        radius: ["0%", "70%"],
        center: ["50%", "43%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 170, name: "专题培训项目" },
          { value: 80, name: "教师远程培训项目" },
        ],
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    size="mini"
    @close="emits('close')"
  >
    <div class="box">
      <div class="box_c">
        <div class="box_c_c">
          <div class="text-opacity-c9-65-16">总计：</div>
          <div class="text-gradual-yellow-22 mr-1">250</div>
          <div class="text-opacity-c9-55-12">个</div>
        </div>
        <div class="box_c_e" ref="PieRef"></div>
      </div>
    </div>
  </Dialog>
</template>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  padding: 20px 60px 26px;
  display: flex;
  gap: 6px;
  .box_c {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // gap: 24px;
    padding-top: 20px;
    .box_c_c {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .box_c_e {
      width: 100%;
      flex: 1;
    }
  }
}
</style>
